<template>
	<view class="boom-detail">
		<!-- 奖品一览盒子 -->
		<view class="reward-look public345">
			<!-- 奖品一栏标题 -->
			<view class="reward-look-top">
				<ThemeText title="奖品一览" />
				<!-- 规则 -->
				<view class="reward-look-rule">
					<uni-icons type="help" size="44rpx" color="#fff" style="vertical-align: middle;"></uni-icons>
					<text style="font-size: 24rpx;margin-left: 14rpx;">规则</text>
				</view>
			</view>

			<!-- 至尊款奖品 -->
			<view class="class-type-title">至尊款奖品</view>
			<!-- 单个至尊款 -->
			<view class="best-class" @click="isDetailPopup=true">
				<view class="best-class-left">
					<image src="/static/images/boom/boom-detail/award-doll.png" mode=""
						class="best-class-img border-A" />
				</view>
				<view class="best-class-right">
					<view class="best-class-name">
						商品名称商品名称商品名称商品名称商品名称商品商品名称商品名称商品名称商品名称商品名称商品
					</view>
					<view class="best-class-get">
						获得概率：5%
					</view>
					<view class="best-class-price">
						参考价：¥<text style="font-size: 36rpx;">108</text>
					</view>
				</view>
			</view>
			<!-- 多个至尊款 -->
			<scroll-view :scroll-x="true">
				<view class="best-class-some" @click="isDetailPopup=true">
					<view class="best-class-item" v-for="it in 4" :key="it">
						<image src="/static/images/boom/boom-detail/award-doll.png" mode=""
							class="best-class-img border-A" />
						<view class="best-class-name">
							商品名称商品名称商品名称商品名称商品名称商品商品名称商品名称商品名称商品名称商品名称商品
						</view>
						<view class="best-class-text">
							<view>参考价：¥108</view>
							<view>获得概率：5%</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<!-- 普通款奖品 -->
			<view class="class-type-title">其他款奖品</view>
			<scroll-view :scroll-x="true">
				<view class="common-class-list">
					<view class="common-class-item" v-for="it in 10" @click="isDetailPopup=true">
						<image src="/static/images/boom/boom-detail/award-doll.png" mode="" class="common-class-img"
							:class="{'border-B':it===1,'border-C':it===2}" />
						<view class="common-class-name">
							商品名称商品名称商品名称商品名称
						</view>
						<view class="common-class-price">
							参考价：¥108
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 就等你了盒子 -->
		<view class="wait-you-box public345">
			<ThemeText title="就等你了" />

			<!-- 入场券 -->
			<view class="wait-you-ticket">
				入场券：¥<text style="font-size: 36rpx;">108</text>
			</view>
		</view>

		<!-- 车队盒子 -->
		<view class="fleet-box">
			<view class="fleet-box-top">
				<!-- 车队倒计时 -->
				<view class="fleet-box-time">
					<view class="opacity5">倒计时</view>
					<text style="font-weight: bold;">1:56:12</text>
				</view>
				<!-- 车队发起人 -->
				<view class="fleet-box-owner">
					<image src="/static/images/boom/boom-detail/good-owner.png" mode="" class="owner-img" />
				</view>
				<!-- 车队人数 -->
				<view class="fleet-box-number">
					<view class="opacity5">车队</view>
					<text style="color: #FF7803;">10</text>/20
				</view>
			</view>

			<!-- 车队发起人 -->
			<view class="fleet-owner-name">
				遥想公瑾遥想公瑾遥想公瑾
			</view>

			<!-- 车队列表 -->
			<view class="fleet-list">
				<!-- 已上车 -->
				<view class="fleet-list-item" v-for="it in 10">
					<image src="/static/images/boom/boom-detail/good-owner.png" mode="" class="img" />
					<view class="name">遥想公瑾遥想公瑾遥想公瑾</view>
				</view>
				<!-- 未上车 第一个添加id go-car -->
				<view class="fleet-list-item no-people" v-for="(it,index) in 8" :key="index" :id="index===0?'go-car':''"
					@click="isCarPopup=true">
					<view class="no-people-circle">
						+
					</view>
					<view class="name">
						遥想公瑾遥想公瑾遥想公瑾
					</view>
				</view>

			</view>
		</view>

		<!-- 邀请好友 -->
		<view class="invite-btn" @click="inviteBtn">
			邀请好友
		</view>

		<!-- 奖品详情弹出层 -->
		<u-popup :show="isDetailPopup" mode="center" @close="isDetailPopup=false" :customStyle="{background:'#0A0A0A'}">
			<swiper class="popup-swiper-box" :circular="true">
				<swiper-item v-for="it in 6" :key="it">
					<image src="/static/images/boom/boom-detail/award-doll.png" mode="" class="popup-img" />
					<!-- 关闭图标 -->
					<view class="close-icon">
						<u-icon name="close-circle" size="44rpx" color="#fff" @click="isDetailPopup=false">
						</u-icon>
					</view>

					<view class="popup-cont public345">
						<view class="popup-name">
							商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称
						</view>
						<view class="normal-cont">
							参考价：¥99.03
						</view>
						<view class="normal-cont">
							赏别： 终极大奖
						</view>
						<view class="normal-cont">
							剩余： 1/1
						</view>
						<view class="normal-cont">
							<text>中奖概率：20%</text>
							<text class="num-of-all">{{it}}/6</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</u-popup>

		<!-- 上车弹出层 -->
		<u-popup :show="isCarPopup" :closeable="true" @close="isCarPopup=false" :customStyle="{background:'#0A0A0A'}">
			<view class="go-car-popup">
				<view class="go-car-tit">
					确认订单
				</view>
				<view class="go-car-body public345">
					<view class="go-car-item ticket">
						<text>车票</text>
						<text>¥108</text>
					</view>
					<view class="go-car-item">
						<text>黄金会员</text>
						<text>9.5折</text>
					</view>
					<view class="go-car-item">
						<text>优惠</text>
						<text style="opacity: .3;">暂无可用</text>
					</view>
					<view class="go-car-item">
						<text>合计</text>
						<text style="color: #F51F43;">￥92.24</text>
					</view>
					<view class="way-box">
						<view class="way-tip">支付方式</view>
						<!-- 遍历三种支付方式 -->
						<!-- 余额不足时 样式类名 cannot -->
						<view class="way" v-for="(one,index) in threePayWay" :key="index">
							<!-- 左侧盒子 -->
							<view class="way-left">
								<!-- 支付方式logo -->
								<image class="image" :src="imageUrl(one.iconPath)" mode="" />
								<view class="way-main">
									<!-- 名称 -->
									<view class="way-name">
										{{one.name}}
									</view>
									<!-- 余额 -->
									<view class="rest-money">
										{{one.rest}}
									</view>
								</view>
							</view>
							<!-- 右侧单选框 -->
							<uni-icons :type="index===checkedIndex?'checkbox-filled':'circle'" size="26"
								:color="index===checkedIndex?'#FF7803':'#D0D0D0'" class="way-right"
								@click="changeCheckedIndex(index)"></uni-icons>
						</view>
					</view>
				</view>
				<!-- 确认支付 -->
				<view class="agree-pay">
					<view class="agree">
						<uni-icons type="circle" color="#D0D0D0" size="30rpx" class="icon"></uni-icons>
						<text>我已阅读并同意</text>
						<text style="color: #FF7803;">《用户购买协议》</text>
					</view>
					<!-- 按钮 -->
					<view class="agree-btn" @click="agreeBtn">
						确认支付
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	const app = getApp()
	const imagesUrl = app.imagesUrl
	// 导入主题字体组件
	import ThemeText from '../../components/common/ThemeText.vue'

	export default {
		data() {
			return {
				imagesUrl,
				// 奖品详情弹出层是否显示
				isDetailPopup: false,
				// 加入车队弹出层是否显示
				isCarPopup: false,
				// 三种支付方式
				threePayWay: [{
					iconPath: 'burst-point.png',
					name: '爆点支付',
					rest: '爆点：99.62'
				}, {
					iconPath: 'rest-pay.png',
					name: '余额支付',
					rest: '余额：99.62'
				}, {
					iconPath: 'wx-pay.png',
					name: '微信支付',
					rest: '微信支付订单'
				}],
				checkedIndex: 0,
			}
		},
		methods: {
			// 改变选中的支付方式
			changeCheckedIndex(v) {
				// 需要判断余额是否足够支付
				this.checkedIndex = v
				console.log(this.checkedIndex, this.threePayWay[this.checkedIndex].name)
			},
			// 邀请好友
			inviteBtn() {
				console.log('邀请好友')
			},
			// 确认支付
			agreeBtn() {
				console.log('确认支付')
			}
		},
		components: {
			ThemeText
		}
	}
</script>

<style lang="scss" scoped>
	// 爆团详情
	.boom-detail {
		width: 100vw;
		padding-bottom: 16rpx;
		background-color: #0a0a0a;
		color: #fff;

		// 奖品一览
		.reward-look {
			padding-bottom: 60rpx;

			.reward-look-top {
				display: flex;
				justify-content: space-between;
				padding-top: 48rpx;

				// 规则
				.reward-look-rule {
					padding: 8rpx 0;
				}
			}

			// 至尊款 普通款
			.class-type-title {
				font-size: 28rpx;
				font-weight: 600;
				color: #fff;
				line-height: 100rpx;
			}

			// 至尊款
			.best-class {
				display: flex;
				justify-content: space-between;
				padding-bottom: 36rpx;

				// 至尊款图片
				.best-class-img {
					width: 224rpx;
					height: 224rpx;
					box-sizing: border-box;
				}

				// 至尊款右侧奖品信息
				.best-class-right {
					margin-left: 24rpx;

					// 商品名称
					.best-class-name {
						font-size: 28rpx;
						font-weight: 500;
						line-height: 48rpx;

						-webkit-line-clamp: 2;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					// 获得概率
					.best-class-get {
						font-size: 24rpx;
						// line-height: 24rpx;
						line-height: 88rpx;
						opacity: .5;
					}

					// 参考价
					.best-class-price {
						font-size: 24rpx;
					}
				}
			}

			// 多个至尊款
			.best-class-some {
				display: flex;

				.best-class-item {
					width: 200rpx;
					margin-right: 20rpx;
					line-height: 24rpx;

					.best-class-img {
						width: 200rpx;
						height: 200rpx;
						margin-bottom: 8rpx;
						box-sizing: border-box;
					}

					.best-class-name {
						font-size: 28rpx;
						line-height: 28rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}

					.best-class-text {
						font-size: 18rpx;
						opacity: .5;
					}
				}
			}

			// 普通款
			.common-class-list {
				display: flex;

				// 普通款单个奖品
				.common-class-item {
					width: 184rpx;
					margin-right: 18rpx;

					// 普通款图片
					.common-class-img {
						width: 184rpx;
						height: 184rpx;
						box-sizing: border-box;
						vertical-align: bottom;
					}

					// 普通款名称
					.common-class-name {
						margin-top: 8rpx;
						font-size: 24rpx;
						line-height: 24rpx;

						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}

					// 普通款参考价
					.common-class-price {
						margin-top: 4rpx;
						font-size: 18rpx;
						line-height: 24rpx;
						opacity: .5;
					}
				}
			}

			// 白色边框
			.border-W {
				border: 1rpx solid #fff;
			}

			// A赏/至尊赏
			.border-A {
				border: 1rpx solid #FFCC00;
			}

			// B赏/稀有款
			.border-B {
				border: 1rpx solid #E9871C;
			}

			// C赏/隐藏款
			.border-C {
				border: 1rpx solid #9932FD;
			}
		}

		// 就等你了
		.wait-you-box {
			display: flex;
			justify-content: space-between;
			padding-bottom: 44rpx;
			font-size: 24rpx;

			.wait-you-ticket {
				padding-top: 18rpx;
			}
		}

		// 车队盒子
		.fleet-box {
			width: 690rpx;
			margin: 0 auto;
			// height: 628px;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, .1);
			font-size: 24rpx;

			// 车队盒子顶部
			.fleet-box-top {
				display: flex;
				justify-content: space-between;
				padding: 48rpx 50rpx 0;

				// 车队倒计时
				.fleet-box-time {
					width: 140rpx;
					font-size: 32rpx;
				}

				// 车队用户头像
				.fleet-box-owner {
					width: 152rpx;
					height: 152rpx;
					border-radius: 50%;
					background: rgba(216, 216, 216, .01);
					box-sizing: border-box;
					border: 1rpx solid #FF7803;
					box-shadow: 0 0 0 0 rgba(255, 120, 3, .5), inset 0 0 6rpx 0 #FF7803;
					margin-top: 34rpx;
					animation: moveOwner 2s ease-in-out infinite;

					.owner-img {
						width: 140rpx;
						height: 140rpx;
						margin: 6rpx;
						border-radius: 50%;
					}
				}

				// 车队数量
				.fleet-box-number {
					width: 140rpx;
					font-size: 32rpx;
					text-align: right;
				}

				// 文本添加透明度
				.opacity5 {
					opacity: .5;
					font-size: 24rpx;
					margin-bottom: 16rpx;
				}
			}

			// 车队发起人名字
			.fleet-owner-name {
				text-align: center;
				line-height: 72rpx;
			}

			// 车队列表
			.fleet-list {
				display: flex;
				flex-wrap: wrap;
				padding: 28rpx;

				// 车队单个用户
				.fleet-list-item {
					position: relative;

					width: 140rpx;
					margin-right: 22rpx;
					margin-top: 56rpx;
					text-align: center;

					&:nth-child(4n) {
						margin-right: 0;
					}

					&:nth-child(-n+4) {
						margin-top: 0;
					}

					// 用户头像
					.img {
						width: 94rpx;
						height: 94rpx;
						vertical-align: bottom;
					}

					// 用户名
					.name {
						line-height: 56rpx;
						// 溢出隐藏
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}

					// 没有用户
					&.no-people {

						.no-people-circle {
							width: 94rpx;
							height: 94rpx;
							border-radius: 50%;
							margin: 0 auto;
							background-color: #fff;
							font-size: 60rpx;
							line-height: 80rpx;
							color: #FF7803;

						}

						// 点击上车
						&#go-car::after {
							position: absolute;
							top: -36rpx;
							left: 0;
							content: '';
							display: inline-block;
							width: 152rpx;
							height: 66rpx;
							background: url(https://showyoung.oss-cn-hangzhou.aliyuncs.com/bangbox/icon/go-car.png) no-repeat;
							background-size: 152rpx 66rpx;
							font-size: 24rpx;
						}
					}
				}
			}
		}

		// 邀请按钮
		.invite-btn {
			width: 690rpx;
			margin: 50rpx auto 0;
			border: 1px solid #FF7803;
			border-radius: 44rpx;
			text-align: center;
			line-height: 88rpx;
			color: #FF7803;
		}

		// 弹出层滑块
		.popup-swiper-box {
			position: relative;
			width: 100vw;
			height: 1088rpx;
			background: #0A0A0A;
			color: #fff;

			// 弹出层图片
			.popup-img {
				width: 100vw;
			}

			// 弹出层关闭按钮
			.close-icon {
				position: absolute;
				top: 30rpx;
				right: 30rpx;
			}

			// 弹出文本
			.popup-cont {
				font-size: 24rpx;
				line-height: 34rpx;

				.popup-name {
					height: 84rpx;
					padding: 16rpx 0;
					font-size: 28rpx;
					line-height: 42rpx;
				}

				.normal-cont {
					padding-bottom: 16rpx;

					&:last-child {
						display: flex;
						justify-content: space-between;

						// 进度条
						.num-of-all {
							font-size: 32rpx;
							font-weight: 500;
							line-height: 34rpx;
						}
					}
				}
			}
		}
	}

	// 车队发起人头像动画
	@keyframes moveOwner {
		0% {
			box-shadow: 0px 0px 10px 0px rgba(255, 120, 3, .3), inset 0 0 4px 0 #FF7803;
		}

		50% {
			box-shadow: 0px 0px 20px 0px rgba(255, 120, 3, .8), inset 0 0 8px 0 #FF7803;
		}

		100% {
			box-shadow: 0px 0px 10px 0px rgba(255, 120, 3, .3), inset 0 0 4px 0 #FF7803;
		}
	}

	// 上车弹出层
	.go-car-popup {
		width: 100vw;
		// height: 400rpx;
		font-size: 26rpx;
		background-color: #1C1C1C;
		color: #fff;

		// 确认订单
		.go-car-tit {
			font-size: 28rpx;
			font-weight: 500;
			text-align: center;
			line-height: 88rpx;
		}

		.go-car-body {
			.go-car-item {
				display: flex;
				justify-content: space-between;
				line-height: 72rpx;

				&.ticket {
					font-size: 32rpx;
					line-height: 108rpx;
				}
			}

			// 支付方式
			.way-box {
				margin-top: 18rpx;

				.way-tip {
					line-height: 94rpx;
				}

				// 三种方式
				.way {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 0;
					// 分隔线
					border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

					.way-left {
						display: flex;

						.image {
							width: 46rpx;
							height: 46rpx;
							margin: 20rpx 32rpx 0 0;
						}

						.way-main {
							line-height: 44rpx;

							.way-name {
								font-size: 26rpx;
								font-weight: 500;
							}

							// 支付余额
							.rest-money {
								font-size: 24rpx;
								color: #999;
							}
						}
					}

					// 支付方式右侧选中框
					.way-right {
						margin-top: 20rpx;
					}

					// 余额不足时的样式
					&.cannot {
						opacity: .5;

						.way-right {
							display: none;
						}
					}
				}

				// 清除最后一项的下边框
				.way:last-child {
					border: 0;
				}
			}
		}

		// 确认支付
		.agree-pay {
			padding-bottom: 16rpx;
			text-align: center;

			.agree {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				color: #999;

				.icon {
					margin-right: 18rpx;
					vertical-align: bottom;
				}
			}

			.agree-btn {
				width: 690rpx;
				margin: 24rpx auto 0;
				line-height: 88rpx;
				border-radius: 44rpx;
				background: #FF7803;
			}
		}
	}
</style>
